<template>
  <div class="common-layout">
    <el-container>
      <el-main class="main">
        <el-divider />
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="序号" />
          <el-table-column prop="productOrderCode" label="订单编号" />
          <el-table-column prop="productTitle" label="商品名称" />
          <el-table-column prop="reason" label="退货原因" />
          <el-table-column prop="description" label="退货描述" />

        </el-table>

      </el-main>
       <el-footer class="footer"
        ><div class="demo-pagination-block">
          <el-pagination
            v-model:current-page="currentPage"
            :page-size="pageSize"
            :size="size"
            layout="total, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /></div
      ></el-footer>
    </el-container>
  </div>
</template>

<script lang="js" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import instance from "@/utils/request";
import { onMounted } from "vue";

const currentPage = ref(1);
const pageSize = ref(10);
const size = ref("large");
const total = ref(0);

const tableData = ref([]);


onMounted(() => {
  getReturnRecordsList();
});

const getReturnRecordsList = async () => {
  try {
    const res = await instance.get("/returnRecords/getAllReturnRecords", {
      params: {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
      },
    });

    if (res.data.code === 200) {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
    } else {
      ElMessage.error(res.data.message || "获取退货记录列表失败");
    }
  } catch (error) {
    console.error("获取退货记录列表出错:", error);
    ElMessage.error("获取退货记录列表失败");
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  getReturnRecordsList();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getReturnRecordsList();
};




</script>

<style scoped>
.main {
  background-color: rgb(255, 255, 255);
  padding: 20px 20px;
  height: calc(84vh - 30px);
}
.footer {
  background-color: rgb(255, 255, 255);
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  margin-top: 15px;
}
.demo-pagination-block {
  display: flex;
  justify-content: flex-end;
}
</style>
